<template>
    <div class="panel_info_content" style="padding:0px;">
        <el-table class="loan_history_table" :data="tableData" style="width: 100%">
            <el-table-column align="left" prop="orderId" :label="$t('common.innerOrderId')" width="120"></el-table-column><!--内部订单号-->
            <el-table-column align="left" prop="collectionUserName" :label="$t('common.operator')" width="120"></el-table-column><!--操作人-->
            <el-table-column align="left" prop="createTime" :label="$t('common.operatingTime')" width="170"><!--操作时间-->
                <template slot-scope="scope">{{ scope.row.createTime | formatDate('yyyy-MM-dd hh:mm:ss') }}</template>
            </el-table-column>
            <el-table-column align="left" :label="$t('common.overdueDays')" prop="lateDays" width="120"></el-table-column><!--逾期天数-->
            <el-table-column align="left" :label="$t('common.telephoneNumber')" prop="collectPhone" width="150"></el-table-column><!--电话号码-->
            <el-table-column align="left" :label="$t('collection.colModus')" prop="collectMethod" width="150"><!--催收形式-->
                <template slot-scope="{row}">{{ switchColModus(row.collectMethod) }}</template>
            </el-table-column>
            <el-table-column align="left" :label="$t('collection.colObject')" prop="touchObj" width="150"><!--催收对象-->
                <template slot-scope="{row}">{{ switchTouchObj(row.touchObj) }}</template>
            </el-table-column>
            <el-table-column align="left" :label="$t('collection.intimacy')" prop="intimacy" width="150">
                <template slot-scope="{row}">{{ switchIntimacy(row.intimacy) }}</template>
            </el-table-column><!--亲密的效果-->
            <el-table-column align="left" :label="$t('collection.colResult')" prop="telFeedBack" width="180"><!--催收结果-->
                <template slot-scope="{row}">{{ switchTelFeedBack(row.telFeedBack) }}</template>
            </el-table-column>
            <!--<el-table-column align="left" :label="$t('collection.promiseRepayDay')" prop="commitmentRepayDate" min-width="150">-->
                <!--<template slot-scope="{ row }">{{ row.commitmentRepayDate | formatDate('yyyy-MM-dd hh:mm') }}</template>-->
            <!--</el-table-column>&lt;!&ndash;承诺还款日&ndash;&gt;-->
            <el-table-column align="left" :label="$t('collection.details')" prop="telFeedBack" width="200">
                <template slot-scope="scope">
                    <div v-if="scope.row.telFeedBack == '1008'">{{ scope.row.setupContractTime | formatDate('yyyy-MM-dd hh:mm') }}</div><!--另设日期联系-->
                    <div v-if="scope.row.telFeedBack == '1003'">{{ scope.row.leaveOfficeTime | formatDate('yyyy-MM-dd') }}</div><!--离职-->
                    <div v-if="scope.row.telFeedBack == '1009' || scope.row.telFeedBack === '5'">{{ scope.row.commitmentRepayDate | formatDate('yyyy-MM-dd hh:mm') }} <span v-if="scope.row.promiseAmount">- {{ scope.row.promiseAmount | formatCurrency }}</span></div><!--承缴/减免-->
                    <div v-if="scope.row.telFeedBack == '1010'">{{ scope.row.thirdRepayMan }} - {{ scope.row.thirdRepayPhone }}</div><!--三方代偿-->
                    <div v-if="scope.row.telFeedBack == '1011'">{{ scope.row.statementRepayTime | formatDate('yyyy-MM-dd hh:mm') }}</div><!--声明已缴-->
                </template>
            </el-table-column><!--详细信息-->
            <el-table-column align="left" :label="$t('common.remark')" prop="remark" :show-overflow-tooltip="true" min-width="150"></el-table-column><!--备注-->
            <el-table-column align="left" prop="imageUrl" :label="$t('common.check')" width="90">
                <template slot-scope="scope"><a v-if="scope.row.imageUrl" @click="showImg(scope.row.imageUrl)" href="javascript:void(0);">{{$t('common.check')}}</a></template>
            </el-table-column><!--图片-->
        </el-table><!--end table-->
        <pagination @pageChange="pageChange" :page="page">分页组件</pagination>
        <show-image-video :visible.sync="showImgDialog" :img-src="imgUrl">图片展示</show-image-video>
    </div>
</template>

<script>
    import mixin from '@/service/mixin';
    import mixinFilter from './mixin/mixin-s0-methods';
    import Pagination from '@/components/pagination';
    import EventBus from '@/libs/event-bus';
    import {eventConf} from '@/config/';
    import ShowImageVideo from '@/components/show-image-video';

    export default {
        name: 'urgingRecordsS0',
        components: {
            Pagination,
            ShowImageVideo,
        },
        props: {
            pageType:{
                default:''
            },
            userId: {
                default: ''
            },
            overdueInfoId: {
                default: ''
            },
            teamId: {
                default: ''
            },
            type:{
                default:''
            },
            orderId:{
                default:''
            }
        },
        mixins: [mixin,mixinFilter],
        data() {
            return {
                //orderId: '',
                //overdueInfoId: '',
                tableData: [],
                showImgDialog: false,
                imgUrl: ''
            };
        },
        methods: {
            getTableData(page) {
                let params = {
                    overdueInfoId: this.overdueInfoId,
                    teamId: this.teamId,
                    page: {
                        pageNo: page.currentPage,
                        pageSize: this.page.pageSize
                    },
                };
                if(this.type==='historyOrder'){
                    delete params.overdueInfoId
                    params.orderId = this.overdueInfoId
                };
                if(this.pageType==='cs'&&this.type!=='historyOrder'){
                    params.orderId = this.orderId
                }
                this.$api.collection.getNotesPre(params).then((res) => {
                    console.warn(res,'ppooss')
                    const {status, data, error} = res;
                    if (status === '1' && error === '00000000') {
                        this.tableData = data.data || [];
                        this.setPage(data.page, this.page);
                    }
                });
            },
            listenEvent() {
                EventBus.$on(eventConf.UPDATEURGINGRECORDS, () => {
                    this.getTableData({currentPage: 1});
                });
            },
            showImg(url) {
                if (url) {
                    this.showImgDialog = true;
                    this.imgUrl = url;
                }
            },
        },
        filters: {

        },
        created() {
            //const params = this.$route.params;
            //this.overdueInfoId = params.id;
            //this.orderId = params.orderId;
               this.page.pageSize = 3;
               console.warn(this.overdueInfoId,'dasdas')
            if (this.overdueInfoId) {
                this.getTableData({currentPage: 1});
                this.listenEvent();
            }
        }
    };
</script>

<style lang="scss" scoped>
    .panel_info_content, .loan_history {
        padding: 0;
    }
</style>
